<template>
	<div class="sub-page-wrap" :class="{'top':top,'bottom':bottom,'left':left,'right':right}">
		<div class="sub-page" :class="{'show':isShow}">
			<slot></slot>
		</div>
	</div>
</template>

<script>
	export default {
		name: "page-slide",
		props: {
			top: {
				type: Boolean,
				default: false
			},
			bottom: {
				type: Boolean,
				default: false
			},
			left: {
				type: Boolean,
				default: false
			},
			right: {
				type: Boolean,
				default: false
			},
			isShow: {
				type: Boolean,
				default: false
			},
		},
	}
</script>

<style lang="less" scoped="scoped">
	.sub-page-wrap {
		.pubClass{
			position: fixed;
			background-color: greenyellow;
			transition: all .3s;
			z-index: 6;
			overflow: hidden;
		}
		&.bottom {
			.sub-page {
				.pubClass;
				width: 100%;
				height: 0vh;
				min-height: 0vh;
				left: 0;
				right: 0;
				bottom: 0;
				&.show {
					height: auto;
					min-height: 100vh;
				}
			}
		}
		&.top {
			.sub-page {
				.pubClass;
				width: 100%;
				height: 0vh;
				min-height: 0vh;
				left: 0;
				right: 0;
				top: 0;
				&.show {
					height: auto;
					min-height: 100vh;
				}
			}
		}
		&.left {
			.sub-page {
				.pubClass;
				width: 100%;
				height: auto;
				min-height: 100vh;
				right: 100%;
				top: 0;
				&.show {
					right: 0;
				}
			}
		}
		&.right {
			.sub-page {
				.pubClass;
				width: 100%;
				height: auto;
				min-height: 100vh;
				left: 100%;
				top: 0;
				&.show {
					left: 0;
				}
			}
		}
	}
</style>
